<template>
  <div class="tab_wrap">
    <div class="tab_title">
      <i class="el-icon-menu"></i>
      <div>学员管理</div>
    </div>
    <el-table border
              :header-row-class-name="myhead"
              stripe
              :data="stuList">
      <el-table-column label="用户名"
                       prop="userName">
      </el-table-column>
      <el-table-column label="邮箱"
                       prop="email">

      </el-table-column>
      <el-table-column label="手机"
                       prop="phone">

      </el-table-column>
      <el-table-column label="注册时间">
        <template slot-scope="scope">
          <div>
            {{new Date(scope.row.createAt).toLocaleString()}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div>
            <el-link>{{scope.row.isstate?'已冻结':'可用'}}</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-link @click="freeze(scope.row.tokenId)"
                     :type="scope.row.isstate?'success':'danger'">{{scope.row.isstate?'解冻':'冻结'}}</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="page_wrap"
                   background
                   :page-size="6"
                   layout="prev, pager, next"
                   :total="count"
                   @current-change="pageChange">
    </el-pagination>
  </div>
</template>

<script>
import { getStudent, FreezeStundent } from '../../api/student'
export default {
  name: 'Ljfvue2011Stutable',
  data () {
    return {
      count: 0,//总数条数
      pageStart: 1,//当前请求页码
      stuList: [], //学员列表
      myhead ({ row, rowIndex }) {
        console.log(row, rowIndex)
        if (rowIndex == "0") {
          return "headActive"
        }
      }
    };
  },

  mounted () {

  },
  created () {
    this.getList();
  },
  beforeMount () {
    // 监听兄弟组件传来的数据 
    var that = this;
    this.$bus.$on("mysearch", function (userName, phone, email) {
      console.log(userName, phone, email)
      that.getList(userName, phone, email)
    })
    // 添加后的触发
    this.$bus.$on("mylist", function () {
      that.getList();
    })
  },
  methods: {
    async freeze (id) {
      var res = await FreezeStundent(id);
      if (res.data.success) {
        this.$message({
          message: res.data.success,
          type: "success"
        })
        this.getList();
      }
    },
    pageChange (val) { //当前页码改变事件
      console.log(val)
      this.pageStart = val; //改变当前页码
      this.getList();
    },

    async getList (userName, phone, email) { //加载学员列表接口
      var res = await getStudent({
        pageStart: this.pageStart,
        userName: userName,
        phone: phone,
        email: email
      })
      console.log(res)
      this.stuList = res.data.data.list;
      this.count = res.data.data.count;//总数据条数
    }
  },
};
</script>

<style lang="less" >
.tab_title {
  width: 100%;
  display: flex;

  i {
    width: 40px;
    height: 40px;
    border: 2px solid red;
    font-size: 40px;
  }
  div {
    flex: 1;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    padding-left: 30px;
    box-sizing: border-box;
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
  }
}
.page_wrap {
  margin-top: 20px;
}
.headActive th {
  background: pink !important;
}
</style>